<template>
  <div class="Blog_information">
    <div class="Bread_crumbs">
      <span
        @click="toaddress('/home/Team/Team_Incubation_community')"
        v-show="blog_name == '历史动态'"
        >孵化社区&nbsp;/</span
      >
      <span
        @click="toaddress('/home/Team/Team_Incubation_community/history')"
        v-show="blog_name == '历史动态'"
        >{{ blog_name }}&nbsp;/</span
      >
      <span
        @click="toaddress('/home/Team/Team_Incubation_community')"
        v-show="blog_name == '孵化社区'"
        >{{ blog_name }}&nbsp;/</span
      >
      <span class="High_brightness">内容详情</span>
    </div>
    <div class="Blog_content">
      <div class="Blog_content_up">
        <span class="Blog_title">{{ information.title }} </span>
        <div class="Blog_time">
          <span> {{ information.nickName }}(作者)&nbsp;&nbsp;</span>
          <span class="el-icon-time">
            {{ information.createTime }}&nbsp;&nbsp;</span
          >
          <span class="el-icon-view">
            {{ information.viewNumber }}&nbsp;&nbsp;</span
          >
        </div>
      </div>
      <div class="activity_detailed_text" v-html="information.content"></div>
      <div class="blog_down">
        <div>
          <el-avatar :src="information.avatarUrl"></el-avatar>
          <span class="blog_author"
            >&nbsp; {{ information.nickName }}(作者)</span
          >
        </div>
        <div>
          <span
            style="color: red"
            class="blog_author"
            v-if="information.hasLike == true"
            ><img
              class="praise_img"
              src="../../../assets/icon/finger_red.png"
              @click="praise_blog"
            />{{ information.praiseNumber }}</span
          >

          <span class="blog_author" v-else>
            <img
              class="praise_img"
              src="../../../assets/icon/finger_none.png"
              @click="praise_blog"
            />{{ information.praiseNumber }}</span
          >
        </div>
      </div>
    </div>
    <div class="Blog_down">
      <span class="Blog_title"
        >评论&nbsp;&nbsp;{{ Comment_information.total }}</span
      >
      <div class="publish_comment">
        <el-avatar :src="head_avatar"></el-avatar>
        <el-input
          :placeholder="placeholder"
          @keyup.enter.native="publish_comment"
          v-model="comment_content"
          style="margin: 0px 10px"
          id="comment"
        >
        </el-input>
        <el-button @click="publish_comment" type="primary">发表评论</el-button>
      </div>
      <el-divider></el-divider>
      <div
        class="blog_comment"
        v-for="item in Comment_information.records"
        :key="item.id"
      >
        <div class="blog_comment_content">
          <div class="blog_comment_content_up">
            <div>
              <el-avatar :src="item.avatarUrl"></el-avatar>
              <span>{{ item.nickName }}</span>
              <span v-show="item.author" id="whether_author">作者</span>
            </div>

            <div>
              <span style="cursor: pointer" @click="reply_comment(item)"
                >回复</span
              >

              <span
                style="cursor: pointer"
                v-show="item.owner"
                @click="delete_comment(item.id)"
                >删除</span
              >

              <span
                style="color: red"
                class="blog_author"
                v-if="item.hasLike == true"
                ><img
                  class="praise_img"
                  src="../../../assets/icon/finger_red.png"
                  @click="praise_comment(item.id)"
                />{{ item.likeNum }}</span
              >

              <span class="blog_author" v-else>
                <img
                  class="praise_img"
                  src="../../../assets/icon/finger_none.png"
                  @click="praise_comment(item.id)"
                />{{ item.likeNum }}</span
              >
            </div>
          </div>

          <span class="blog_comment_content_down"> {{ item.content }}</span>

          <div
            class="blog_comment"
            v-for="item2 in item.comments"
            :key="item2.id"
          >
            <div class="blog_comment_content">
              <div class="blog_comment_content_up">
                <div>
                  <el-avatar :src="item2.avatarUrl"></el-avatar>
                  <span>{{ item2.nickName }}</span>
                  <span v-show="item2.author" id="whether_author">作者</span>
                </div>

                <div>
                  <span
                    style="cursor: pointer"
                    v-show="item2.owner"
                    @click="delete_comment(item2.id)"
                    >删除</span
                  >
                  <span
                    style="color: red"
                    class="blog_author"
                    v-if="item2.hasLike == true"
                    ><img
                      class="praise_img"
                      src="../../../assets/icon/finger_red.png"
                      @click="praise_comment(item2.id)"
                    />{{ item2.likeNum }}</span
                  >

                  <span class="blog_author" v-else>
                    <img
                      class="praise_img"
                      src="../../../assets/icon/finger_none.png"
                      @click="praise_comment(item2.id)"
                    />{{ item2.likeNum }}</span
                  >
                </div>
              </div>

              <span class="blog_comment_content_down">
                {{ item2.content }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        background
        style="margin: 0 auto"
        layout="prev, pager, next"
        :page-count="Comment_information.pages"
        @current-change="handleCurrentChange"
        :current-page="page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      information: "",
      comment_list: "",
      Comment_information: "",
      articleId: "",
      page: 1,
      head_avatar: "",
      comment_content: "",
      placeholder: "善语结善缘,恶语伤人心~",
      parentId: -1,
      blog_name: "",
    };
  },
  methods: {
    toaddress(address) {
      this.$router.push(address);
    },
    async get_blog() {
      const self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/team/article/getArticleByArticleId",
        params: { articleId: self.articleId },
      });

      this.information = res.msg;
      console.log(this.information);
    },
    async get_comment() {
      const self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/team/comment/getCommentByArticleId",
        params: {
          page: self.page,
          pageSize: 4,
          articleId: self.articleId,
        },
      });

      this.Comment_information = res.msg;
      this.page_count = res.msg.pages;
    },
    handleCurrentChange(newSize) {
      this.page = newSize;
      this.get_comment();
    },
    //点赞文章
    async praise_blog() {
      const self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "post",
        url: "/api/team/article/addArticlePraise",
        params: {
          articleId: self.articleId,
        },
      });
      this.get_blog();
    },

    //发表评论
    async publish_comment() {
      if (this.comment_content == "") {
        this.$message.error("不能评论内容不能为空");
        return;
      }
      const self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "post",
        url: "/api/team/comment/addComment",
        data: {
          articleId: self.articleId,
          content: self.comment_content,
          parentId: self.parentId,
        },
      });
      console.log(res);
      if (res.code != 200) {
        this.$message.error("评论失败");
        return;
      }
      this.$message.success(res.msg);
      this.comment_content = "";
      this.parentId = -1;
      this.placeholder = "善语结善缘,恶语伤人心~";
      this.get_comment();
    },
    //点赞评论
    async praise_comment(id) {
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "post",
        url: "/api/team/comment/addComPraise",
        params: {
          commentId: id,
        },
      });

      this.get_comment();
    },
    //删除评论
    async delete_comment(id) {
      const self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "delete",
        url: "/api/team/comment/deleteComment",
        params: {
          commentId: id,
          articleId: self.articleId,
        },
      });
      if (res.code != 200) {
        this.$message.error(res.msg);
        return;
      }
      this.$message.success(res.msg);
      this.get_comment();
    },
    //回复评论
    reply_comment(item) {
      this.parentId = item.id;
      this.placeholder = "回复" + item.nickName + "的评论";
      var dom = document.getElementById("comment");
      dom.focus();
    },
  },
  async created() {
    this.articleId = window.sessionStorage.getItem("article_id");
    this.blog_name = window.sessionStorage.getItem("blog_name");
    this.$emit("name", "/home/Team/Team_Incubation_community");
    this.get_blog();
    this.get_comment();
    this.head_avatar = window.localStorage.getItem("avatarUrl");
  },
};
</script>

<style lang="less">
.Blog_information {
  display: flex;
  // background-color: rgb(201, 26, 26);
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: auto;

  //切换页面
  .Bread_crumbs {
    display: flex;
    margin: 10px;
    margin-left: 20px;

    span {
      color: rgb(127, 127, 127);
      cursor: pointer;
    }
    .High_brightness {
      color: rgb(0, 110, 255);
      cursor: pointer;
    }

    span:hover {
      color: rgb(0, 110, 255);
    }
  }
}
//正文
.Blog_content {
  width: 98%;
  margin: 10px 0 0 20px;
  display: flex;

  border-radius: 13px;
  // background: #ffffff;
  // background-color: rgb(126, 51, 51);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  flex-direction: column;
  // overflow: auto;
  .activity_detailed_text {
  
    font-weight: normal;
    width: 97%;
    margin: 00px auto;
    img{
      width: 100%;
    }
  
  }
  .Blog_content_up {
    display: flex;
    flex-direction: column;
    // height: 100px;

    .Blog_time {
      height: 50px;
      line-height: 50px;
      color: grey;
      flex-direction: row;
      margin-left: 20px;
      border-bottom: 1px solid grey;
      span {
        font-weight: normal;
        margin: 0;
        font-size: 20px;
      }
    }
  }
}
.Blog_title {
  margin: 20px 0 10px 20px;
  //标题的字体大小
  font-size: 27px;
  font-weight: bold;
}
.blog_down {
  width: 97%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  height: 40px;
  border-top: 1px solid grey;
  div {
    height: 80%;
    display: flex;
    flex-direction: row;
  }
  .blog_author {
    height: 40px;

    line-height: 40px;
    display: flex;
  }
}
.praise_img {
  height: 30px;
  width: 30px;
  cursor: pointer;
}
.Blog_down {
  width: 98%;
  margin: 20px 0 0 20px;
  display: flex;
  flex-direction: column;
  border-radius: 13px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .publish_comment {
    display: flex;
    margin: 0 20px;
    // border-bottom: 1px solid gray;
  }
  .blog_comment {
    border-bottom: 1px solid rgb(220, 223, 230);
    // background-color: rgb(95, 30, 30);
    display: flex;
    margin-left: 20px;
    margin-bottom: 20px;
    .blog_comment_content {
      display: flex;
      flex-direction: column;
      width: 100%;
      .blog_comment_content_up {
        display: flex;
        width: 100%;
        justify-content: space-between;
        // background-color: rgb(207, 28, 28);
      }
      .blog_comment_content_down {
        display: flex;

        font-weight: normal;
        width: 97%;
        margin: 20px auto;
        font-size: 20px;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
  }
}
#whether_author {
  background-color: rgb(202, 6, 6);
  color: #fff;
  // height: 20px;
}
.Blog_information::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #fff;
}
.Blog_information::-webkit-scrollbar {
  width: 6px;
}
.Blog_information:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
</style>